<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过prototype原型操作节点</title>
</head>
<body>
    <!-- this表示一个标签对象 -->
    <h1 onclick="this.color('red')">houdunren.com</h1>
    <h2 onclick="this.color('green')">后盾人</h2>
    <div onclick="this.color('blue')">xiaxia</div>
    <script>
        const h1 = document.querySelector('h1');
        // 给h1和h2的原型添加方法
        // h1.__proto__.color = function(color){
        //     this.style.color = color;
        // }

        // HTMLHeadingElement.prototype.color = function(color){
        //     this.style.color = color;
        // }

        // 要想让h1,h2,div都有color方法，要在共有的原型节点的上加方法
        Node.prototype = Object.assign(Node.prototype,{
            color(color){
                this.style.color = color;
            }
        })

    </script>
</body>
</html>